import { themes } from "./model";
// 修改页面中的样式变量值
const changeStyle = (obj) => {
  for (let key in obj) {
    document
      .getElementById("app")
      .style.setProperty(`--${key}`, obj[key]);
  }
};
// 改变主题的方法
export const setTheme = (themeName) => {
  localStorage.setItem("theme", themeName); // 保存主题到本地，下次进入使用该主题
  const themeConfig = themes[themeName];
  // 如果有主题名称，那么则采用我们定义的主题
  if (themeConfig) {
   
    localStorage.setItem("color", themeConfig.color); // 保存主题色到本地
    localStorage.setItem("color1", themeConfig.color1); // 保存主题色到本地
    localStorage.setItem("color2", themeConfig.color2); // 保存主题色到本地
    localStorage.setItem("color3", themeConfig.color3); // 保存主题色到本地
    localStorage.setItem("color4", themeConfig.color4); // 保存主题色到本地
    localStorage.setItem("color5", themeConfig.color5); // 保存主题色到本地
    changeStyle(themeConfig); // 改变样式

  } else {
    let themeConfig = {
      color: localStorage.getItem("color"),
      color1: localStorage.getItem("color1"),
      color2: localStorage.getItem("color2"),
      color3: localStorage.getItem("color3"),
      color4: localStorage.getItem("color4"),
      color5: localStorage.getItem("color5"),
    };
    changeStyle(themeConfig);
  }
};
